<template>
  <div class="video-player-container">
    <div class="video-window">
      <video
        id="videoPlayer"
        control
        autoplay
        style="width: 100%; aspect-ratio: 4 / 3"
      >
        <source :src="selectedVideo as string" type="video/mp4" />
        {{ $t("ui.videoPlayer.videoNotSupported") }}
      </video>
    </div>
    <div class="camera-selection">
      <a-dropdown
        :getPopupContainer="getPopupContainer"
        placement="bottomLeft"
        :visible="isDropdownVisible"
        @visibleChange="handleVisibleChange"
      >
        <a class="ant-dropdown-link" @click.prevent="toggleDropdown">
          <!-- 点击时调用方法 -->
          {{ $t("ui.videoPlayer.selectCamera") }}
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu :style="{ maxHeight: '200px', overflowY: 'auto' }">
            <a-menu-item
              v-for="video in videos"
              :key="video.path"
              @click="
                changeVideo(
                  video.name,
                  video.path,
                  video.camera_id,
                  video.camera_name
                )
              "
            >
              {{
                video.camera_id
                  ? `${video.name} (${video.camera_id})`
                  : video.name
              }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <span class="selected-camera"
        >{{ $t("ui.videoPlayer.currentCamera") }} {{ currentCamera }}</span
      >
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Dropdown, Menu } from "ant-design-vue"; // 引入 Dropdown 和 Menu

export default defineComponent({
  name: "ParkingManagement", // 组件名称
  components: {
    "a-menu": Menu,
    "a-menu-item": Menu.Item,
    ADropdown: Dropdown,
    DownOutlined, // 注册图标组件
  },
  setup() {
    const store = useStore();
    const basePath =
      "https://36.248.25.143:31216/api/aisp-video-compute-manager/v1/cameras/";

    // 视频流列表
    const videos = [
      {
        name: "王庄",
        path: "7262423161805574145/play-stream?ssrc=7B4BF242&mode=play",
        camera_id: "7262423161805574145",
        camera_name: "王庄",
      },
      {
        name: "鳌峰大桥南桥头",
        path: "7262309300049960961/play-stream?ssrc=6A55CC77&mode=play",
        camera_id: "7262309300049960961",
        camera_name: "鳌峰大桥",
      },
    ];

    // 生成完整的路径
    videos.forEach((video) => {
      video.path = `${basePath}${video.path}`;
    });

    const selectedVideo = ref<string | null>(null);
    const currentCamera = ref<string | null>(null);
    const isDropdownVisible = ref(false);

    const toggleDropdown = () => {
      isDropdownVisible.value = !isDropdownVisible.value;
    };

    const handleVisibleChange = (visible: boolean) => {
      isDropdownVisible.value = visible;
    };

    // 组件挂载后
    onMounted(() => {
      const storedVideo = store.getters.getSelectedVideo;
      selectedVideo.value =
        storedVideo?.path.length >= 1 ? storedVideo?.path : videos[0].path;
      currentCamera.value = storedVideo?.name || videos[0]?.name;

      store.dispatch("updateSelectedVideo", {
        name: storedVideo?.name || "",
        path: selectedVideo.value,
        camera_id: storedVideo?.camera_id || videos[0].camera_id,
        camera_name: storedVideo?.camera_name || videos[0].camera_name,
      });
    });

    // 切换视频流
    const changeVideo = (
      name: string,
      videoPath: string,
      videoId: string,
      cameraName: string
    ) => {
      selectedVideo.value = videoPath;
      currentCamera.value = videoId ? `${name} (${videoId})` : name;

      const videoElement = document.getElementById(
        "videoPlayer"
      ) as HTMLVideoElement;
      if (videoElement) {
        videoElement.src = videoPath;
        videoElement.addEventListener("loadeddata", () => {
          videoElement.play().catch((error) => {
            console.error("播放失败:", error);
          });
        });
        videoElement.load();
      }

      store.dispatch("updateSelectedVideo", {
        name: name,
        path: videoPath,
        camera_id: videoId,
        camera_name: cameraName,
      });
    };

    const getPopupContainer = () => {
      return document.body as HTMLElement;
    };

    return {
      videos,
      selectedVideo,
      currentCamera,
      isDropdownVisible,
      toggleDropdown,
      handleVisibleChange,
      changeVideo,
      getPopupContainer,
    };
  },
});
</script>

<style scoped>
.video-window {
  margin-top: -60px;
}

.video-player-container {
  padding: 20px;
  /* 添加内边距 */
  /* color: white; */
  /* 字体颜色为白色以便在暗背景上可读 */
  position: relative;
  /* 为容器设置相对定位 */
}

.camera-selection {
  display: flex;
  /* 使用flexbox使下拉菜单和选中摄像头在一行上 */
  align-items: flex-start;
  /* 垂直居中对齐 */
  justify-content: space-between;
  margin-bottom: 10px;
  /* 下拉菜单和视频播放器之间的间隔 */
  height: 20px;
  /* 设置高度为20px */
}

.ant-dropdown-style {
  z-index: 2;
  /* 确保下拉链接在前面 */
}

.ant-dropdown-link {
  font-size: 20px;
  /* 下拉菜单文本大小 */
  height: 40px;
  /* 确保下拉菜单足够高 */
  z-index: 2;
  /* 确保下拉链接在前面 */
}

.selected-camera {
  margin-left: 10px;
  /* 下拉菜单和文字之间的间隔 */
  font-size: 20px;
  /* 选中摄像头文本大小 */
  /* color: white; */
  /* 确保文本颜色一致 */
}

.ant-dropdown {
  z-index: 10;
  /* 提高下拉菜单的 z-index */
  font-size: 16px;
}

.vlc {
  width: 100%;
  /* 设置宽度 */
  height: 600px;
  /* 设置高度 */
  z-index: 1;
  /* 确保视频播放器的 z-index 低于下拉菜单 */
}

.ant-dropdown {
  z-index: 2000;
  background-color: var(--bg-color);
  /* 提高 z-index 确保下拉菜单在前面 */
}
</style>
